<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "note/base.html" %}
{% load static %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
博客板块
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->

{% block content %}
<link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
<link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">
<style type="text/css">
    #like_button{
        cursor:pointer;
    }

</style>


<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8">
            <!-- Post content-->
            <article>
                <!-- Post header-->
                <header class="mb-4">
                    <!-- Post title-->
                    <h1 class="fw-bolder mb-1">{{note.title}}</h1>
                    <!-- Post meta content-->
                    <div class="text-muted fst-italic mb-2">{{note.create_time}}</div>
                    <!-- Post categories-->
                    <span class="badge bg-secondary text-decoration-none link-light" >{{note.tag1}}</span>
                    <span class="badge bg-secondary text-decoration-none link-light" >{{note.tag2}}</span>
                    {%if flag%}
                        <a href="edit?auther={{username}}&noteId={{note.id}}" class="btn btn-primary float-right">编辑文章</a>
                    {%endif%}
                </header>
                <!-- Preview image figure-->
<!--                <figure class="mb-4"><img class="img-fluid rounded" src="https://dummyimage.com/900x400/ced4da/6c757d.jpg" alt="..." /></figure>-->
                <!-- Post content-->
                <section class="mb-5">
                    <div id="content"><textarea>{{ note.content }}</textarea></div>
<!--                    <p class="fs-5 mb-4">{{note.content}}</p>-->

                </section>
            </article>
            <div class="container">
                <div class="row">
                    <p class="bi bi-hand-thumbs-up" id="like_button">{{note.ok_num}}</p>
                    &nbsp&nbsp&nbsp
                    <p class="bi bi-chat-left-dots">{{note.comment_num}}</p>
                </div>
            </div>
            <!-- Comments section-->
            <section class="mb-5">
                <div class="card bg-light">
                    <div class="card-body">
                        <!-- Comment form-->
                        <form class="mb-4"><textarea class="form-control" rows="3" placeholder="Join the discussion and leave a comment!"></textarea></form>
                        <!-- Comment with nested comments-->
                        <div class="d-flex mb-4">
                            <!-- Parent comment-->
                            <div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
                            <div class="ms-3">
                                <div class="fw-bold">Commenter Name</div>
                                If you're going to lead a space frontier, it has to be government; it'll never be private enterprise. Because the space frontier is dangerous, and it's expensive, and it has unquantified risks.
                                <!-- Child comment 1-->
                                <div class="d-flex mt-4">
                                    <div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
                                    <div class="ms-3">
                                        <div class="fw-bold">Commenter Name</div>
                                        And under those conditions, you cannot establish a capital-market evaluation of that enterprise. You can't get investors.
                                    </div>
                                </div>
                                <!-- Child comment 2-->
                                <div class="d-flex mt-4">
                                    <div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
                                    <div class="ms-3">
                                        <div class="fw-bold">Commenter Name</div>
                                        When you put money directly to a problem, it makes a good headline.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Single comment-->
                        <div class="d-flex">
                            <div class="flex-shrink-0"><img class="rounded-circle" src="https://dummyimage.com/50x50/ced4da/6c757d.jpg" alt="..." /></div>
                            <div class="ms-3">
                                <div class="fw-bold">Commenter Name</div>
                                When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence.
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!-- Side widgets-->
        <div class="col-lg-4">
            <!-- Search widget-->
            <div class="card mb-4">
                <div class="card-header">搜索</div>
                <div class="card-body">
                    <form role="form" action="/note/search" method="post">
                    <div class="input-group">
                        <input class="form-control" type="text" name="search_content" placeholder="Enter search term..."/>
                        <button class="btn btn-primary" id="button-search" type="submit">Go!</button>
                    </div>
                    </form>
                </div>
            </div>
            <!-- Categories widget-->
            <div class="card mb-4">
                <div class="card-header">分类专栏</div>
                <div class="card-body">
                        <div class="row">
                        <div class="col-sm-6">
                        {%for tag in sorted_tag_key%}
                            <ul class="list-unstyled mb-0">
                                {%if not forloop.counter|divisibleby:2%}
                                <li><a href="search?tag={{tag}}">{{tag}}</a></li>
                                {%endif%}
                            </ul>
                            {%endfor%}
                        </div>
                        <div class="col-sm-6">
                            {%for tag in sorted_tag_key%}
                            <ul class="list-unstyled mb-0">
                                {%if forloop.counter|divisibleby:2%}
                                <li><a href="search?tag={{tag}}">{{tag}}</a></li>
                                {%endif%}
                            </ul>
                            {%endfor%}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Side widget-->
            <div class="card mb-4">
                <div class="card-header">公告</div>
                <div class="card-body">here are some words which you want everyone who are viewing this article to know!</div>
            </div>
        </div>
    </div>
</div>
<script>
   $(document).ready(function(){
    if("{{like}}"=="True"){
        $("#like_button").removeClass("bi-hand-thumbs-up");
        $("#like_button").addClass("bi-hand-thumbs-up-fill");
    }
    else{
        $("#like_button").removeClass("bi-hand-thumbs-up-fill");
        $("#like_button").addClass("bi-hand-thumbs-up");
    }
  $("#like_button").click(function(){
<!--   console.log("{{targetUser}}");-->
<!--   var num = $("#like_button").html();-->
<!--   num = parseInt(num);-->
<!--   num = num + 1;-->
<!--   console.log(typeof num);-->
<!--   $("#like_button").html(num);-->
    $.ajax({
        url:"like_handle",
        type:"POST",
        data:{
            user: "{{username}}",
            targetNote:"{{note.id}}"
        },
        cache:false,
        success: function(data){
            $("#like_button").html(data['like_num']);
            if(data['like']){
                $("#like_button").removeClass("bi-hand-thumbs-up");
                $("#like_button").addClass("bi-hand-thumbs-up-fill");
            }else{
                $("#like_button").removeClass("bi-hand-thumbs-up-fill");
                $("#like_button").addClass("bi-hand-thumbs-up");
            }
        },
        error: function(xhr){
            console.log(xhr)
        }
    });

  });
});
</script>

  <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
<script>
  $(function () {
      // js 解析markdown
      editormd.markdownToHTML("content", {
          //htmlDecode      : "style,script,iframe",  // you can filter tags decode
          emoji           : true,
          taskList        : true,
          tex             : true,  // 默认不解析
          flowChart       : true,  // 默认不解析
          sequenceDiagram : true,  // 默认不解析
      });

      $(".reference-link").each(function (i,obj) {
        console.log(obj)
      })
  })

</script>
{% endblock content %}